<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>qs_ui</title>
  <script src="../vendor/fastclick.js"></script>
  <link href="http://cdn.bootcss.com/normalize/4.1.1/normalize.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="application.css">
</head>
<body>
<div class="qs-titlebar">
  可跳转的列表项
  <small>点击会变色哟</small>
</div>
<div class="qs-cells">
  <a href="javascript:;" class="qs-cell">
    <div class="qs-cell-bd">主要内容啊</div>
  </a>
  <a href="javascript:;" class="qs-cell">
    <div class="qs-cell-bd">
      主要内容啊
    </div>
    <div class="qs-cell-ft">
      点击查看
    </div>
  </a>
</div>

<div class="qs-titlebar">不可跳转仅作为展示信息的列表项</div>
<div class="qs-cells highlight-icon">
  <div class="qs-cell">
    <div class="qs-cell-hd">
      <i class="fa fa-user"></i>
    </div>
    <div class="qs-cell-bd">Secret</div>
  </div>
  <div class="qs-cell">
    <div class="qs-cell-hd">
      <i class="fa fa-calendar"></i>
    </div>
    <div class="qs-cell-bd">年龄</div>
  </div>
  <div class="qs-cell">
    <div class="qs-cell-hd">
      <i class="fa fa-mars"></i>
    </div>
    <div class="qs-cell-bd">性别</div>
  </div>
  <a class="qs-cell">
    <div class="qs-cell-hd">
      <i class="fa fa-map"></i>
    </div>
    <div class="qs-cell-bd ellipsis">26号宇宙中心银河系地球上头亚太总部驻侠客岛分部</div>
  </a>
</div>

<div class="content">
  <div class="qs-titlebar">
    表单的列表项
    <small>填表！！</small>
  </div>
  <div class="qs-cells qs-cells-form">
    <div class="qs-cell">
      <div class="qs-cell-hd">
        <i class="fa fa-user"></i>
      </div>
      <div class="qs-cell-bd">
        <input type="text" placeholder="请输入您的姓名">
      </div>
    </div>
    <div class="qs-cell">
      <div class="qs-cell-hd">
        <i class="fa fa-calendar"></i>
      </div>
      <div class="qs-cell-bd">
        <input type="text" placeholder="请输入您的年龄">
      </div>
    </div>
    <div class="qs-cell">
      <div class="qs-cell-hd">
        <i class="fa fa-mars"></i>
      </div>
      <div class="qs-cell-bd">
        <label for="radio-male" class="qs-cell-radio">
          <input type="radio" name="gender" id="radio-male">
          <span class="radio-btn"></span>
          <span class="radio-label">男</span>
        </label>
        <label for="radio-female" class="qs-cell-radio">
          <input type="radio" name="gender" id="radio-female">
          <span class="radio-btn"></span>
          <span class="radio-label">女</span>
        </label>
      </div>
    </div>
    <div class="qs-cell">
      <div class="qs-cell-hd">
        <i class="fa fa-map"></i>
      </div>
      <div class="qs-cell-bd">
        <input type="text" placeholder="输哈地址">
      </div>
    </div>
  </div>
</div>


<div class="qs-tabbar">
  <a href="#" class="qs-tabbar-item">
    <i class="fa fa-file-o qs-tabbar-icon"></i>
    <div class="qs-tabbar-label">课程</div>
  </a>
  <a href="#" class="qs-tabbar-item">
    <i class="fa fa-shopping-cart qs-tabbar-icon"></i>
    <div class="qs-tabbar-label">商店</div>
  </a>
  <a href="#" class="qs-tabbar-item active">
    <i class="fa fa-info qs-tabbar-icon"></i>
    <div class="qs-tabbar-label">信息</div>
  </a>
  <a href="#" class="qs-tabbar-item">
    <i class="fa fa-user qs-tabbar-icon"></i>
    <div class="qs-tabbar-label">我</div>
  </a>
</div>

<script>
  window.addEventListener('load', function() {
    FastClick.attach(document.body);
  }, false);
</script>
</body>
</html>